<template>
	<popup ref="popup">
		<view class="pay_content">
			<view class="main">
				<view class="title">~缴纳总金额~</view>
				<view class="money">
					<image class="money-icon" src="/static/pages/money.png" mode="widthFix"></image>
					<text class="txt">10.0</text>
				</view>
				<view class="tips">成功参加活动报名费不给予退还</view>
				<view class="line"></view>
				<view class="pay_way">支付方式</view>
				<view class="list">
					<view class="item" @click="isActive = 2">
						<view class="item_left">
							<image class="ali icon" src="/static/pages/ali-icon.png" mode="widthFix"></image>
							<text>支付宝</text>
						</view>
						<view class="item_right">
							<image v-show="isActive == 2" class="right_image" src="/static/pages/selecy-icon.png"
								mode="widthFix"></image>
							<view v-show="isActive != 2" class="right_icon"></view>
						</view>
					</view>

					<view class="item" @click="isActive = 1">
						<view class="item_left">
							<image class="wx icon" src="/static/pages/wx-icon.png" mode="widthFix"></image>
							<text>微信</text>
						</view>
						<view class="item_right">
							<image v-show="isActive == 1" class="right_image" src="/static/pages/selecy-icon.png"
								mode="widthFix"></image>
							<view v-show="isActive != 1" class="right_icon"></view>
						</view>
					</view>

					<view class="item" @click="isActive = 4">
						<view class="item_left">
							<image class="balance icon" src="/static/pages/balance-icon.png" mode="widthFix"></image>
							<text>我的余额</text>
						</view>
						<view class="item_right">
							<image v-show="isActive == 4" class="right_image" src="/static/pages/selecy-icon.png"
								mode="widthFix"></image>
							<view v-show="isActive != 4" class="right_icon"></view>
						</view>
					</view>
				</view>
				<view class="confirm_pay" @click="pay">确认支付</view>
			</view>
		</view>
	</popup>
</template>

<script>
	import popup from '../uni-popup/uni-popup.vue'
	export default {
		name: "pay-pop",
		components: {
			popup
		},
		data() {
			return {
				isActive: 2
			};
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			pay() {
				this.$refs.popup.close()
				this.$emit('onClick', this.isActive)
			}
		}
	}
</script>

<style scoped lang="scss">
	.pay_content {
		padding: 0 80upx;
		box-sizing: border-box;
		width: 100%;

		.main {
			width: 100%;
			height: 980upx;
			background: url(../../static/pages/b8df012d66e28792abd6e9b470aba2b.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			flex-direction: column;

			.title {
				margin-top: 215upx;
				font-size: 34upx;
				font-weight: bold;
				color: #13B5FD;
			}

			.money {
				margin: 40upx 0 45upx 0;
				display: flex;
				align-items: center;
				font-size: 48upx;
				font-weight: bold;
				color: #FE510D;

				.money-icon {
					width: 28upx;
				}
			}

			.tips {
				font-size: 24upx;
				color: #13B5FD;
			}

			.line {
				width: 447upx;
				// height: 2upx;
				// background-color: rgba(19, 181, 253, 0.3);
				margin: 37upx 0 34upx 0;
				border-bottom:2rpx dashed rgba(19, 181, 253, 0.3);
			}

			.pay_way {
				width: 222upx;
				height: 65upx;
				line-height: 65upx;
				background: #D3F0F9;
				border-radius: 33upx;
				text-align: center;
				font-size: 30upx;
				font-weight: bold;
				color: #13B5FD;
			}

			.list {
				margin-top: 30upx;
				width: 100%;
				padding: 0 90upx;
				box-sizing: border-box;

				.item+.item {
					margin-top: 32upx;
				}

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.ali {
						width: 37upx;
					}

					.wx {
						width: 39upx;
					}

					.balance {
						width: 37upx;
					}

					.icon {
						margin-right: 13upx;
					}

					.item_left {
						display: flex;
						align-items: center;
						font-size: 28upx;
						color: #333333;
					}

					.item_right {
						height: 34upx;
					}

					.right_image {
						width: 34upx;
					}

					.right_icon {
						width: 33upx;
						height: 33upx;
						border: 2upx solid #8B8B8B;
						border-radius: 50%;
					}
				}
			}

			.confirm_pay {
				margin-top: 30upx;
				padding: 0 90upx;
				box-sizing: border-box;
				background-color: #13B5FD;
				color: #FFFFFF;
				height: 82upx;
				line-height: 82upx;
				text-align: center;
				font-size: 32upx;
				border-radius: 40upx;
			}
		}
	}
</style>
